<template>
  <div>
    <el-table-form ref="form" class="form" :model="query">
      <el-form-item :table-form-merge="1.1" label="条件类型" class="merge-item">
        <el-select v-model="query.type">
          <!-- <el-option label="订单号" value="1">订单号</el-option> -->
          <el-option label="客户电话" value="1" />
          <el-option label="客户编号" value="2" />
          <el-option label="客户名称" value="3" />
          <el-option label="客户地址" value="4" />
          <el-option label="身份证号" value="5" />
          <el-option label="销售人员" value="6" />
        </el-select>
        <el-input v-model="query.csmText" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="所属机构" prop="orgSNNo">
        <el-tree-select
          v-model="query.orgSNNo"
          :clearable="false"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择组织机构',
            loading: $loadingPlugin.getTreeData
          }"
          :tree-params=" {
            'default-expand-all': true,
            'expand-on-click-node': false,
            'highlight-current': true,
            props:{
              value:'orgSNNo',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData
          }"
          @node-click="selectTreeChange"
        />
      </el-form-item>

      <el-form-item label="开户时间" :table-form-merge="1.1" class="merge-item">

        <el-date-picker
          v-model="query.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="客户类型" class="merge-item">
        <el-select v-model="query.csmType">
          <el-option label="请选择" value="-1" />
          <el-option label="居民用户" value="1" />
          <el-option label="商业用户" value="2" />
          <el-option label="工业用户" value="4" />
          <el-option label="瓶批用户" value="8" />
          <el-option label="槽批用户" value="16" />
        </el-select>
      </el-form-item>

      <template v-slot:btns>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </template>
    </el-table-form>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button type="primary" icon="el-icon-folder-add" @click="add">新增</el-button>
      </div>
    </div>
    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
    />
    <add ref="add" :tree-data="treeData" :cms-type="cmsType" :cms-level="cmsLevel" />
    <!-- <detailbottle ref="detail" /> -->
  </div>
</template>

<script>
  import { parseTime } from '@/utils'
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import tableData from './tabelData.json'

  export default {
    name: 'pickUpCustomer',
    components: {
      add: require('./add.vue').default
    },

    data() {
      return {
        treeData: [],
        cmsLevel: [{ 'value': 1, 'desc': '一级', 'key': 'Level1' }, { 'value': 2, 'desc': '二级会员', 'key': 'Level2' }, { 'value': 3, 'desc': '三级会员', 'key': 'Level3' }],
        cmsType: [{ 'value': 1, 'desc': '居民用户', 'key': 'Resident_user' }, { 'value': 2, 'desc': '商业用户', 'key': 'Business_user' }, { 'value': 4, 'desc': '工业用户', 'key': 'GY_user' }, { 'value': 8, 'desc': '瓶批用户', 'key': 'BOTTLE_user' }, { 'value': 16, 'desc': '槽批用户', 'key': 'GROOVE_user' }],
        query: {
          type1: 'cmsPhone',
          type2: 'lessTime',
          date: null,
          status: '0',
          checked: false
        },
        tableData: {
          column: [
            // { label: '自提客户ID', prop: 'csmPickupId', width: 80, hidden: true },
            { label: '客户编号', prop: 'csmCode', width: 130, align: 'center' },
            { label: '客户名称', prop: 'csmName', width: 100, align: 'center' },
            { label: '客户类型', prop: 'csmType', width: 100, align: 'center', formatter: this.csmTypeFormat },
            { label: '客户性质', prop: 'csmQuality', width: 100, align: 'center', formatter: this.csmQualityFormat },
            { label: '客户地址', prop: 'csmRgAddress', width: 200, align: 'center' },
            { label: '客户电话', prop: 'csmRgPhone', width: 100, align: 'center' },
            { label: '身份证号', prop: 'sfzh', width: 180, align: 'center' },
            { label: '所属机构', prop: 'orgName', width: 100, align: 'center' },
            { label: '销售人员', prop: 'salesManName', width: 100, align: 'center' },
            { label: '状态', prop: 'csmStatus', width: 100, align: 'center',
              render: (h, { row, column, $index }) => {
                return (
                  <div style={`color:${this.getColor(row, column)}`}>
                   {this.csmStatusFormat(row, column)}
                  </div>
                )
              } },
            { label: '开户时间', prop: 'createTime', width: 130, align: 'center', formatter: this.dateTimeFormat },

            {
              label: '操作',
              align: 'center',
              fixed: 'right',
              width: 210,
              render: (h, { row, $index }) => {
                return (
                  <div>
                     <el-link size='mini' onClick={() => this.edit(row, $index)}>
                      {row.csmStatus !== -1 ? '编辑' : ''}
                    </el-link>
                    <el-link size='mini' type='danger' onClick={() => this.cancellation(row, $index)}>
                    {row.csmStatus === 2 ? '注销 ' : ''}
                    </el-link>
                  </div>
                )
              }
            }

          ],
          data: [{ 'id': 1634181774298, 'goodsName': '退残回收测试', 'goodsId': 946, 'gprince': 200, 'tag': 20000, 'definePrice': 0, 'diff': 0, 'gcount': 1, 'gprefPrice': 0, 'tip': 0, 'fee1': 0, 'fee2': 0, 'baseFloorFee': 0, 'treceivable': '200.00', 'gtId': 48, 'gtFlag': 1, 'priceScore': 0, 'requiredScore': 0, 'pricingMode': 2, 'specCode': 'S0649', 'specName': '5型', 'storeCount': 0, 'isSpeicalPriceFloor': false, 'yf': 0, 'tip1': 0 }, { 'id': 1634181786832, 'goodsName': '15KG液化气', 'goodsId': 761, 'gprince': 0.01, 'tag': 1, 'definePrice': 0, 'diff': 0, 'gcount': 1, 'gprefPrice': 0, 'tip': 0, 'fee1': 0, 'fee2': 0.01, 'baseFloorFee': 0, 'treceivable': '0.02', 'gtId': 48, 'gtFlag': 1, 'priceScore': 0, 'requiredScore': 0, 'pricingMode': 1, 'specCode': 'S0336', 'specName': '15KG', 'storeCount': 0, 'isSpeicalPriceFloor': false, 'yf': '0.00', 'fee21': '0.01', 'tip1': '0.00' }, { 'id': 1634181790522, 'goodsName': '赵越超专用', 'goodsId': 951, 'gprince': 0.01, 'tag': 1, 'definePrice': 0, 'diff': 0, 'gcount': 2, 'gprefPrice': 0, 'tip': 0, 'fee1': 0, 'fee2': 0, 'baseFloorFee': 0, 'treceivable': '0.02', 'gtId': 48, 'gtFlag': 1, 'priceScore': 0, 'requiredScore': 0, 'pricingMode': 1, 'specCode': 'S0336', 'specName': '15KG', 'storeCount': 0, 'isSpeicalPriceFloor': false, 'yf': 0, 'tip1': 0 }, { 'id': 1634184016558, 'goodsName': '15KG液化气（培训）', 'goodsId': 839, 'gprince': 100, 'tag': 10000, 'definePrice': 0, 'diff': 0, 'gcount': 1, 'gprefPrice': 0, 'tip': 0, 'fee1': 11, 'fee2': 3, 'baseFloorFee': 0, 'treceivable': '114.00', 'gtId': 48, 'gtFlag': 1, 'priceScore': 0, 'requiredScore': 0, 'pricingMode': 1, 'specCode': 'S0336', 'specName': '15KG', 'storeCount': 0, 'isSpeicalPriceFloor': false, 'yf': '11.00', 'fee21': '3.00', 'tip1': '0.00' }, { 'id': 1634184026166, 'goodsName': '12KG液化气', 'goodsId': 733, 'gprince': 100, 'tag': 10000, 'definePrice': 0, 'diff': 0, 'gcount': 1, 'gprefPrice': 0, 'tip': 1, 'fee1': 3, 'fee2': 1, 'baseFloorFee': 0, 'treceivable': '105.00', 'gtId': 48, 'gtFlag': 1, 'priceScore': 0, 'requiredScore': 0, 'pricingMode': 1, 'specCode': 'S0488', 'specName': '12KG', 'storeCount': 0, 'isSpeicalPriceFloor': false, 'yf': '3.00', 'fee21': '1.00', 'tip1': '1.00' }]
        }

      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    mounted() {
      this.tableData.data = tableData.data.rows
      // console.log(tableData)
    },
    async created() {
      await this.getTreeData()
    },
    methods: {
      csmTypeFormat: function(row, column, cellValue, index) {
        const val = row[column.property]
        if (!val) return
        return this.cmsType.find(l => l.value === val).desc || ''
      },
      csmQualityFormat: function(row, column, cellValue, index) {
        const val = row[column.property]
        /** if (val == 1) {
	    			return "<span style='font-size:14px;'>普通</span>";
	    		} else if (val == 2) {
	    			return "<span style='font-size:14px;'>特殊</span>";
	    		} else if (val == 3) {
	    			return "<span style='font-size:14px;'>白金</span>";
	    		} else if (val == 4) {
					return "<span style='font-size:14px;'>钻石</span>";
				}*/
        var msg = this.cmsLevel.find(l => l.value === val)
        if (!msg) {
          return ''
        }
        return msg.desc
      },
      csmStatusFormat: function(row, column, cellValue, index) {
        const val = row[column.property]
        if (val === 1) {
          return '未审核'
        } else if (val === 2) {
          return '已审核'
        } else if (val === -1) {
          return '已注销'
        } else {
          return ''
        }
      },
      dateTimeFormat: function(row, column, cellValue, index) {
        // console.log(row, column, cellValue, index)
        const val = row[column.property]
        if (val) {
          return (parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}'))
        } else {
          return ''
        }
      },

      // 获取所属机构数据
      async getTreeData() {
        // const res = await organizationQueryList({})
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择所属机构
      selectTreeChange(value) {
        this.orgSNNo = value.orgSNNo
      },
      search() {

      },
      // 新增
      add() {
        this.$refs.add.open()
      },

      // 注销
      cancellation(row) {

      },
      edit(row) {
        this.$refs.add.open(row)
      },
      getColor(row, column) {
        const val = row[column.property]
        if (val === 1) {
          return '#EA8511'
        } else if (val === 2) {
          return ''
        } else if (val === -1) {
          return 'red'
        } else {
          return ''
        }
      }

    }
  }
</script>

<style scoped lang="scss">
  .form {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    // & /deep/ .el-form-item {
    //   .el-form-item__content > .el-select {
    //     width: 100%;
    //   }
    // }
    // .block {
    //   width: 100%;
    // }
  }
</style>
